<!DOCTYPE html>
<html>
<head>
<title>Product detail of <%= Name %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<style type="text/css">
     body{ width:1000px;    margin:auto;}
     #up{ height:250px;}
    #thumb{ float:left; width:200px; height: 250px;}
    #info{float:left; width:790px; height: 250px}
    #description{ padding:30px;}
</style>
<script src="/javascripts/jquery.js"></script>
<script>
          $(document).ready(function(){
              $('#btnSubmit').click(function(){
                console.log('Buy it!');
                var pid = <%= idProduct %>
                var stock = <%= No_of_Stock %>;
                $num = $('#buyNum').attr('value');
                console.log('BuyNum: '+ $num);
                var query = {
                    pid : pid,
                    buyNum: $num
                }
                console.log(query);
                if($num<stock){
                       $.getJSON('buy',query,function(data){
                    console.log('DATA: '+data);
                  });
                    
                }
             
              });
          });
    </script>
</head>
<body>
    <div id='up'>
        
           
            <div id='thumb'>
               <img src='<%= Thumbnail %>' alt='thumb' width=100px height=80px/>  
        </div>
        <div id='info'>
            <p id='pName'><%= Name %></p><br>
            <p id='price'>Price: <%= Price %></p><br>
            <p id='sale'><%= No_of_Sales %> of this product saled</p><!--xiao liang --><br>
            <p id='stock'><%= No_of_Stock %> in stock</p><!--Kucun--><br>
            <input type='number' value='1' id='buyNum'><br>
            <button type='button' id='btnSubmit'>Buy it</button>
            
        </div>
    </div>
    <div id='down'>
        <div id='description'>
          <%= Description %>
        </div>
         <div id='big_pic'>
                <img src='<%= Pictures %>' alt='Picture' width=400px height=300px/>
            </div>
    </div>
</body>
</html>

